import { fetchSearchMap } from "@userList/utils";
import { operateType, queryParams } from "./store";
import { searchConfig } from "./search";
import { drawerConfig } from "./drawer";
import { tableConfig } from "./table";
import { handleSearchTime } from "@userList/search";
export default defineComponent({
  setup(props, { attrs, emit, expose, slots }) {
    const { proxy } = reactive<any>(getCurrentInstance());
    const showDrawer = () => (defineDrawer.visible.value = true);
    const handleAction = ({ record, type, callback }: any) => {
      operateType.value = type;
      const { title: drawerTitle, formState: drawerForm } = defineDrawer;
      switch (trimAll(type)) {
        case "detail":
          drawerTitle.value = $t("base.clubInfo");
          fetchDetail(record.id).then((res) => {
            showDrawer();
            Object.keys(drawerForm).forEach((key: any) => {
              drawerForm[key] = res[key] ?? drawerForm[key];
            });
            drawerForm.type = 1;
          });
          break;
        case "detail->member":
          drawerTitle.value = $t("base.clubInfo");
          fetchDetail(record.id).then((res) => {
            showDrawer();
            Object.keys(drawerForm).forEach((key: any) => {
              drawerForm[key] = res[key] ?? drawerForm[key];
            });
            drawerForm.type = 2;
          });
          break;
        case "update->status":
          proxy.$confirm({
            closable: true,
            maskClosable: true,
            icon: null,
            title: () => <>{record.status === 0 ? $t("club6") : $t("club7")}</>,
            style: {
              top: "30%",
            },
            content: (
              <>
                {record.status === 0
                  ? ` ${$t("club18")}${record.name}${$t("club20")}`
                  : `${$t("club19")} ${record.name}${$t("club21")}`}
              </>
            ),
            onOk: async () => {
              await clubApi.club.updateClubStatus({
                editId: record.id,
              });
              message.success($t("base.updateSucess"));
              fetchList();
              callback?.();
            },
          });
          break;
      }
    };
    const refreshTable = async (searchParams: any = {}) => {
      defineTable.pagination.current = 1;
      initObjAttr(queryParams, searchParams);
      await fetchList();
    };
    const fetchDetail = async (detailId: string) => {
      const { loading, pagination, dataSource } = defineTable;
      try {
        loading.value = true;
        const res: any = await clubApi.club.queryClubDetail({
          detailId,
        });
        if (res.code != 200) return message.error(res.message);
        return res?.data;
      } catch (error: any) {
        message.error(error.message);
      } finally {
        loading.value = false;
      }
    };
    const fetchList = async () => {
      const { loading, pagination, dataSource } = defineTable;
      try {
        handleSearchTime(["start_date", "end_date"], queryParams, "YYYY-MM-DD");
        loading.value = true;
        dataSource.value.length = 0;
        const res: any = await clubApi.club.queryClubList({
          page: pagination.current,
          page_size: pagination.pageSize,
          ...queryParams,
        });
        if (res.code != 200) return message.error(res.message);
        dataSource.value = res?.data?.list ?? [];
        pagination.total = res?.data?.attributes?.total ?? 0;
      } catch (error: any) {
        message.error(error.message);
      } finally {
        loading.value = false;
      }
    };

    const defineSearch = searchConfig({ handleAction, refreshTable });
    const defineDrawer = drawerConfig({
      proxy,
      handleAction,
      refreshTable,
      operateType,
    });
    const defineTable = tableConfig({ handleAction, fetchList });
    watch(
      () => sysZone.value,
      () => fetchList()
    );
    onActivated(() => {
      fetchList();
      fetchSearchMap();
    });

    return () => (
      <>
        <s-design
          defineTable={defineTable}
          defineSearch={defineSearch}
          defineDrawer={defineDrawer}
        />
      </>
    );
  },
});
